<template>
      <el-button
        tabindex="0"
        @click="onUpload" size="mini"
      >
        <i class="el-icon-plus"></i>选择图片
      </el-button>
</template>

<script type="text/babel">
export default {
  name: "EditorImageManage",
  model: {
    prop: "images",
    event: "change",
  },

  props: {
    multiple: { type: Boolean, default: false }, // 是否支持选取多个图片
    limit: { type: Number, default: 9 }, // 最多可选择图片数量
    images: { type: [Array, String], default: () => [] }, // 已选图片
  },

  data() {
    return {
      isLoading: true,
      theImages: this.images,
      uploadSuccessCount: 0,

      imgRes: {
        items: [],
        total: 0,
      },
    };
  },

  watch: {
    theImages() {
      this.$emit("change", this.theImages);
    },
    images() {
      this.theImages = this.images;
    },
  },

  methods: {
    onUpload() {
      let _this = this;
      this.$zzImgbox(
        {
          multiple: _this.multiple, // 是否支持选取多个图片
          limit: _this.limit, // 最多可选择图片数量
          callback: (res) => {
            this.$emit('successCBK', res)
            _this.theImages = res;
          },
        },
        _this.theImages
      );
    }
  },

  mounted() {},

  computed: {},
};
</script>

<style lang="scss">

</style>
